<template>
	<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
		<fui-card @click="navDetailPage(item)" v-for="item in list" :key="item.id" :margin="['24rpx', '24rpx']"
			style="overflow: hidden">
			<fui-list-cell>
				<view class="">
					<text class="fs-color__label">签单人：</text>
					<text>{{ item.sign_person }}</text>
				</view>
				<view class="tag-wrap">
					<fui-tag type="purple" theme="light">{{ item.channel_name }}</fui-tag>
				</view>
			</fui-list-cell>

			<fui-list-cell :bottomBorder="false" :padding="['16rpx', '32rpx']">
				<text class="fs-color__label">客户姓名：</text>
				<text>{{ item.customer_name }}</text>
			</fui-list-cell>
			<fui-list-cell :bottomBorder="false" :padding="['16rpx', '32rpx']">
				<text class="fs-color__label">客户详情：</text>
				<text>{{ item.company_name }}</text>
			</fui-list-cell>
			<fui-list-cell :bottomBorder="false" :padding="['16rpx', '32rpx']">
				<text class="fs-color__label">签单日期：</text>
				<text>{{ item.sign_date }}</text>
			</fui-list-cell>
			<fui-list-cell :bottomBorder="false" :padding="['16rpx', '32rpx']">
				<text class="fs-color__label">收款金额：</text>
				<text>{{ item.received_amount }}</text>
			</fui-list-cell>
			<fui-list-cell :bottomBorder="false" :padding="['16rpx', '32rpx']">
				<text class="fs-color__label">创建时间：</text>
				<text>{{ item.created_at }}</text>
			</fui-list-cell>
			<fui-list-cell :bottomBorder="false" :padding="['16rpx', '32rpx']">
				<text class="fs-color__label">更新时间：</text>
				<text>{{ item.updated_at }}</text>
			</fui-list-cell>
			<view class="fs-flex fs-justify__between fs-px32 fs-pt8 fs-pb32">
				<fui-button :disabled="!item.edit" @click="handleEdit(item)" type="primary" width="280rpx"
					height="64rpx" size="24">编辑</fui-button>
				<fui-button @click="handleCopy(item)" type="success" width="280rpx" height="64rpx"
					size="24">复制</fui-button>
			</view>
		</fui-card>
	</mescroll-body>
</template>

<script setup>
	import { ref } from 'vue';
	import { fetchRecordsPage, fetchCopyInfo } from '@/common/api/index.js';
	import { onPageScroll, onReachBottom, onReady, onShareAppMessage } from '@dcloudio/uni-app';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import { upOption } from '@/utils/utils.js';
	import $fui from '@/components/firstui/fui-clipboard';

	const loading = ref(false);
	const list = ref([]);
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

	async function upCallback(mescroll) {
		const { data } = await fetchRecordsPage({
			page: mescroll.num,
			limit: mescroll.size
		}).catch(() => {
			mescroll.endErr();
		});
		const curPageData = data.list || [];
		if (mescroll.num === 1) list.value = [];
		list.value = list.value.concat(curPageData);
		mescroll.endBySize(curPageData.length, data.total || 0);
	}

	async function handleCopy(item) {
		const res = await fetchCopyInfo(item.id);
		if (res) {
			uni.setClipboardData({
				data: res,
				success: function() {
					uni.$fui.toast('复制成功');
				}
			});
		}
	}

	const handleEdit = (item) => {
		uni.navigateTo({
			url: `/pages/reporting/reporting?id=${item.id}`,
			events: {
				reloadPage: (data) => {
					if (data.reload) {
						getMescroll().resetUpScroll();
						getMescroll().scrollTo(0, 0);
					}
				}
			}
		});
	};

	const navDetailPage = (item) => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + item.id
		});
	};

	onShareAppMessage(() => {
		return {
			title: '捷报Hub'
		}
	})
</script>

<style lang="scss">
	.tag-wrap {
		position: absolute;
		right: 0;
		top: 0;
	}
</style>